<template>
    <div class="section_common">
        <div class="main">
            <el-form label-width="100px" >
                <el-form-item label="申请人">
                    <el-input v-model="applyerUser" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="课程名称">
                    <el-input v-model="courseOrTrainType" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="申请原因"  >
                    <el-input type="textarea" v-model="applyReason" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="期望课程内容">
                    <el-input type="textarea" v-model="applyContent" size="mini"></el-input>
                </el-form-item>

                <div class="upload_area">
                    <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
                        <van-step v-show="show">
                            <h3>审批人</h3>
                            <van-image v-for="(item,index) in spLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                            </van-image>
                        </van-step>
                    </van-steps>
                </div>
                <van-dialog title="   " v-model="bhshow" show-cancel-button :before-close="chargeBtn" message-align="left">
                    <el-form-item label="驳回原因" required>
                        <el-input v-model="bhreason" type="textarea" :autosize="{ minRows: 4}"></el-input>
                    </el-form-item>
                </van-dialog>
                <el-form-item>
                    <!--<el-button type="primary" size="mini" @click="submitForm()">提交</el-button>-->
                    <el-button id="isBack" v-show="isBackBtn" v-bind:disabled="isShowBack" type="warning" size="mini" @click="backout">撤销</el-button>
                    <el-button id="isAgree" v-show="isAgreeBtn" v-bind:disabled="isShow" type="primary" size="mini" @click="submitAgree">{{message}}</el-button>
                    <el-button id="isNotAgree" v-show="isAgreeBtn" v-bind:disabled="isShow" type="warning" size="mini" @click="submitNotAgree">{{message1}}</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {Image as VanImage,Toast,Dialog} from "vant";
    import Vue from "vue";
    Vue.use(Dialog)
    Vue.use(VanImage);

    export default {
        data() {
            return {
                id:this.$route.params.id,//路由接收的id
                active: -1,
                show:false,
                courseOrTrainType:'',
                applyReason:'',
                applyContent:'',
                spLd:[],
                applyerUser:'',
                bhreason:'',
                bhshow:false,
                isShow:false,
                message:'通过',
                message1:'驳回',
                isAgreeBtn:false,
                isBackBtn:false,
                isShowBack:false,

                sendNeedApplyUrl: "/mobiles/sendNeedApply", //提交申请Url
                nowUser: JSON.parse(localStorage.getItem('userInfo')).userId,
            }
        },
        created() {
            //根据地区获取页面审批人
            this.selSpLeaderByNowUser();
            //获取页面详情
            this.getNeedsDetails();
        },
        methods: {
            //根据申请人的id找到对应的审批人
            selSpLeaderByNowUser(){
                this.$https.post('/mobiles/getNeedApplySpLeader', {
                    nowUser:this.nowUser
                }).then((res)=>{
                    console.log(res)
                    console.log(res.data.data)
                    //展示审批流程
                    if (res.data.data && res.data.data.length>0){
                        this.show=true;
                        this.spLd=res.data.data;
                    }else{
                        this.show=false;
                        this.spLd=[];
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            getNeedsDetails(){
                this.$https.post('/mobiles/getNeedsDetails', {
                    id: this.id,
                    approver: this.nowUser, //审批用户

                }).then(res => {
                    console.log(res.data)
                    var needApply = res.data.data.needApply;
                    this.courseOrTrainType = needApply.courseOrTrainType;
                    this.applyReason = needApply.applyReason;
                    this.applyContent = needApply.applyContent;
                    this.applyerUser = res.data.data.applyerUser;
                    if (res.data.data.agreeBtn){
                        this.isAgreeBtn = true
                        if (needApply.applyResult==1){
                            this.message='已通过';
                            this.isShow=true;
                        }else if (needApply.applyResult==2){
                            this.message1='已驳回';
                            this.isShow=true;
                        }
                    }else {
                        this.isAgreeBtn = false
                    }
                    if (res.data.data.backBtn){
                        this.isBackBtn = true;
                        if (needApply.applyResult==3){
                            this.isShowBack = true;
                        }else {
                            this.isShowBack = false;
                        }
                    }else {
                        this.isBackBtn = false;
                    }

                    // this.active=1;


                }).catch(err => {
                    console.log(err);
                })
            },
            //撤销提出的招聘申请
            backout(){
                this.$https.post('/mobiles/needsDetailBackOut', {
                    nowUser:this.nowUser,
                    id:this.id,
                }).then((res) => {
                    Toast(res.data.message);
                    this.go();

                }).catch(err => {
                    console.log(err)
                });
            },
            // 提交同意
            submitAgree() {
                this.isShow=true;
                this.$https.post('/mobiles/isAgreeNeeds', {
                    id: this.id,
                    approver: this.nowUser, //审批用户

                }).then(res => {
                    res;
                    Toast("已通过");
                    this.message='已通过';
                    this.isShow=true;
                    this.getNeedsDetails();//找到对应的页面详情，及领导信息

                }).catch(err => {
                    console.log(err)
                });
            },
            chargeBtn(action,done){
                if (action==='cancel'){
                    done();
                }else if (action==='confirm'){
                    this.show=false;
                    this.$https.post('/mobiles/isAgreeNeeds', {
                        id: this.id,
                        approver: this.nowUser, //审批用户
                        resultContent:this.bhreason,
                    }).then(res => {
                        res;
                        Toast("已驳回");
                        this.message1="已驳回";
                        this.isShow=true;
                        this.getNeedsDetails();//找到对应的页面详情，及领导信息
                        done();
                    }).catch(err => {
                        console.log(err)
                    });
                }
            },
            //驳回
            submitNotAgree() {
                this.bhshow=true;
            },
            go() {
                this.$router.go(-1)
            }
        },
        beforeRouteLeave(to, from, next) {
            to.params.activeName = '培训管理';
            next();
        },
    };
</script>

<style lang="scss" scoped>
    .main {
        background-color: white;

        .el-form {
            padding-right: 10px;

            .el-form-item {
                .el-form-item__label {
                    line-height: 16px;
                }

                margin-bottom: 20px;
            }
        }
    }
</style>
